<template>
	<div class="wrapper_new">
	<swiper :options="swiperOption" v-if="showSwiperList">
    <!-- slides -->
    <swiper-slide v-for="item of swiperList" :key="item.id">
		<img class="swiper-img" :src="item.imgUrl" />
	</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>

  <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
    <!-- <div class="swiper-button-next" slot="button-next"></div> -->
	  <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
  </swiper>
  </div>
</template>

<script>
	export default{
		name:'HomeSwiper',
		props:{
			'swiperList':Array
		},
		data() {
			return {
				swiperOption:{
					'pagination':'.swiper-pagination',
					loop: true,
					observer:true,//修改swiper自己或子元素时，自动初始化swiper 
                    observeParents:true,//修改swiper的父元素时，自动初始化swiper 
					autoplay: 3000,
	                autoplayDisableOnInteraction: false
				},
				// swiperList:[{
				//   id:'0001',
				//   imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/e9f92741ef8b1cb0472ced96150d0d1c.jpg_750x200_1f0a2392.jpg'
				// },{
				// 	 id:'0002',
				// 	imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/26c9b54e3e02d3724f614883d77a62c6.jpg_750x200_57aa8efa.jpg'
				// },{
				// 	 id:'0003',
				// 	imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/a9658b2ee2c2c6de227c9710a8b04d48.jpg_750x200_f38fba28.jpg'
				// },{
				// 	 id:'0004',
				// 	imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/e0c5d91cb9b435518bb223b81b70874e.jpg_750x200_f2d5c66a.jpg'
				// },{
				// 	 id:'0005',
				// 	imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/eb47a432471be6ac40b69828676479dd.jpg_750x200_207de9c6.jpg'
				// }]
			}
		},
		computed:{
			showSwiperList(){
				return this.swiperList.length;
			}
		}
		
	}
</script>

<style lang="stylus" scoped>
    
	    .wrapper_new{
		 width: 100%;
		 //高度是宽度的31.25%
		 // height: 31.25vw
         height: 0;
		 overflow: hidden;
		 padding-bottom: 26.99%;
		}
		.swiper-img
	      width: 100%
</style>
